<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p7_表单练习</title>
</head>
<body>
<!--
    form表示整个表单 action="#"表示将收集到的数据提交至当前页
    input的type值
    text文本password密码radio单选checkbox多选submit提交 reset重置 button普通按钮
    date日期 color颜色 file文件 range范围

-->
<!--
    name:用来设置选项的名字，没有此值该控件无法提交值！
    value:设置输入框的默认值，按钮上显示的文字，单选/多选中选项中的值
-->
    <form action="#">
        姓名:<input type="text" name="uname" value="张三"><br>
        <!-- 单值属性: readonly只读(只能看不能改) disabled禁用(值还不能提交)   -->
        姓名:<input type="text" name="uname" value="张三" readonly><br>
        姓名:<input type="text" name="uname" value="张三" disabled><br>
        姓名:<input type="text" name="uname" placeholder=""><br>
        密码:<input type="password" name="upwd" maxlength="6"><br>
        性别:<input type="radio" name="gender" value="1" checked>男
        性别:<input type="radio" name="gender" value="0">女
        <br>
        爱好:
        <input type="checkbox" name="like" value="smoke">抽烟
        <input type="checkbox" name="like" value="Java">Java
        <input type="checkbox" name="like" value="perm">烫头
        <input type="checkbox" name="like" value="drink" checked>喝酒
        <br>
        生日:<input type="date" name="birthday"><br>
        颜色:<input type="color" name="lc"><br>
        范围;<input type="range" name="sf"><br>
        文件:<input type="file" name="uf"><br>
        喜欢的城市:
        <!-- 下拉选框 <K,V> => <name:city,value:sz> -->
        <select name="city">
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
            <option value="cq" selected>重庆</option>
            <option value="eb">哈尔滨</option>
        </select>
        <br>
        <input type="checkbox" id="1">
        <!-- 效果:点击文字时就可以选中复选框  -->
        <label for="1">我同意以上协议</label>
        <br>
        <label for="2">关联文字</label>
        <input type="text" id="2">
        <br>
        留言板:
        <br>
        <!-- 多行文本域  -->
        <textarea name="content" cols="30" rows="15" style="resize: none"></textarea>
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="保存">
        <button>我是按钮</button>
    </form>

</body>
</html>